<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>练习DEMO</title>
    <link rel="stylesheet" type="text/css" href="./link_css.css">
</head>
<body>
<header role="banner">
    <h1><a href="#"><img id="pic1" src="http://i4.piimg.com/645bc8e12abd07a2.png"></a></h1>
    <nav role="navigation">
        <ul>
            <li><a href="#link1">导航链接一</a></li>
            <li><a href="#link2">导航链接二</a></li>
            <li><a href="#link3">导航链接三</a></li>
            <li><a href="#link4">导航链接四</a></li>
        </ul>
    </nav>
</header>
<!-- <div class="toptitle">
<ul>
    <li><a href="#link">导航链接一</a></li>
    <li><a href="#link1">导航链接二</a></li>
    <li><a href="#link2">导航链接三</a></li>
    <li><a href="http://www.baidu.com">导航链接四</a></li>
</ul>
</div> -->
<article>
<h2>文章一级标题</h2>
<h3>文章二级标题</h3>
<span>文章作者&nbsp;文章发表时间</span>
<p>这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，换行了
<br />
这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，<a href="http://www.baidu.com">这里有一个链接链接到http://www.baidu.com</a>,这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落。</p>
<img src="http://i4.piimg.com/83e7a3d9042ffd1a.jpg">
<p>这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，<a href="http://www.baidu.com">这里有一个链接链接到http://www.baidu.com</a>,这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，<strong>这里有个粗体字</strong>,这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落。</p>
</article>

<article>
<h2><a id="link">另一篇文章的一级标题</a></h2>
<h2>文章二级标题</h2>
<span>文章作者&nbsp;文章发表时间</span>
<br/>
<img title="这个是图片" src="http://i4.piimg.com/83e7a3d9042ffd1a.jpg">
<ul class="list1">
    <li title="项目列表一">项目列表一</li>
    <li title="项目列表二">项目列表二</li>
    <li title="项目列表三">项目列表三</li>
</ul>
</article>

<article>
<h2><a id="link1">图片</a></h2>
<!-- <div class="img1">
<p>好看的图片</p>
<img title="这个是图片" src="http://i4.piimg.com/83e7a3d9042ffd1a.jpg">
</div>
<p>好看的图片</p>
<img title="这个是图片" src="http://i4.piimg.com/83e7a3d9042ffd1a.jpg">
<p>好看的图片</p>
<img title="这个是图片" src="http://i4.piimg.com/83e7a3d9042ffd1a.jpg">
<p>好看的图片</p>
<img title="这个是图片" src="http://i4.piimg.com/83e7a3d9042ffd1a.jpg"> -->
<dl>
    <dt></dt>
    <dd><span>好看的图片</span><img src="http://i4.piimg.com/83e7a3d9042ffd1a.jpg" alt="好看的图片"></dd>
    <dd><span>好看的图片</span><img src="http://i4.piimg.com/83e7a3d9042ffd1a.jpg" alt="好看的图片"></dd>
    <dd><span>好看的图片</span><img src="http://i4.piimg.com/83e7a3d9042ffd1a.jpg" alt="好看的图片"></dd>
    <dd><span>好看的图片</span><img src="http://i4.piimg.com/83e7a3d9042ffd1a.jpg" alt="好看的图片"></dd>
</dl>
</article>

<article>
<h2><a id="link2">最后一篇文章的一级标题</a></h2>
<h2>文章二级标题</h2>
<span>文章作者&nbsp;文章发表时间</span>
<ol>
    <li>排名1</li>
    <li>排名2</li>
    <li>排名3</li>
</ol>
<p>下面是一个表格</p>
<table class="table1"><tbody>
<tr>
    <th>表头</th>
    <th>表头</th>
    <th>表头</th>
</tr>
<tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td><a href="#">操作</a></td>
</tr>
<tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td><a href="#">操作</a></td>
</tr>
<tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td><a href="#">操作</a></td>
</tr>
<tr class="table_td"><!-- 有问题 -->
    <td>总计</td>
    <td colspan="2">1000</td>
</tr>
</tbody></table>
</article>

<article>
<h3 class="title1" title="这里以后是一个侧栏，这是侧栏的标题">侧栏注册窗口标题</h3>
<form class="form1" method="post" action="asd.php">
    <div>
        <label class="tips">请输入邮箱地址</label>
        <input type="text" name="邮箱" value="这是一个文本输入框"></input>
        <p>邮箱地址请按格式输入</p>
    </div>
    <div>
        <label class="tips">请输入密码</label>
        <input type="password" name="密码" value="这是一个文本输入框"></input>
    </div>
    <div>
        <label class="tips">请重复输入密码</label>
        <input type="password" name="密码" ></input>
        <p>密码请为6-16位英文数字</p>
    </div>
    <div>
        <label class="tips">性别</label>
        <input type="radio" value="1" name="radio" checked="checked"></input>男
        <input type="radio" value="2" name="radio"></input>女
    </div>
    <div>
        <label class="tips">城市</label>
        <select>
            <option value="北京" selected="selected">北京</option>
            <option value="上海">上海</option>
            <option value="重庆">重庆</option>
    </select>
    </div>
    <div>
        <label class="tips">爱好</label>
        <input style="vertical-align: middle;" class="checkbox1" type="checkbox" value="运动"><span class="size1">运动</span></input>
        <input class="checkbox1" type="checkbox" value="艺术"><span style="vertical-align: top;" class="size1">艺术</span></input>
        <input class="checkbox1" type="checkbox" value="科学" checked="checked"><span class="size1">科学</span></input>
    </div>
    <div>
        <label class="tips">个人描述</label>
        <textarea class="textarea">这是一个多行输入文本框···</textarea>
    </div>
    <div>
        <input class="button" type="submit" value="确认"></input>
        <input class="button" type="reset" value="重置"></input>
        <div style="clear:both;"></div>
    </div>
</form>
</article>
<footer><p>版权所有©</p></footer>
</body>
</html>
